<script setup lang="ts">
import { saveMenuApi, updateMenuApi } from "@/api/menu";
import { nextTick, ref } from "vue";
const drawer = ref(false);
const userFormRef = ref<any>(null);
const treeRef = ref();
const isEditor = ref(false);
const open = (row: any) => {
  drawer.value = true;
  if (row) {
    isEditor.value = true;
    setTimeout(() => {
      menuForm.value = JSON.parse(JSON.stringify(row));
      if (row.parentId !== "0") {
        nextTick(() => {
          treeRef.value.setCheckedNodes([{ value: row.parentId }]);
        });
      }
    }, 0);
  } else {
    isEditor.value = false;
  }
};

const menuForm = ref({
  id: null,
  name: "",
  path: "",
  component: "",
  meta: {
    title: "",
    icon: "",
    isHidden: false,
  },
  parentId: "",
});

const props = defineProps({
  menuData: {
    type: Array,
    default: () => [],
  },
  isEditor: {
    type: Boolean,
    default: false,
  },
  update: {
    type: Function,
    default: () => {},
  },
});

const checkClick = (node: any) => {
  if (
    treeRef.value.getCheckedKeys().length &&
    treeRef.value.getCheckedKeys().length > 1
  ) {
    treeRef.value.setCheckedNodes([node]);
  }
  // console.log(treeRef.value.getCheckedKeys());
  const CheckedKey = treeRef.value.getCheckedKeys().length
    ? treeRef.value.getCheckedKeys()[0]
    : "";
  menuForm.value.parentId = CheckedKey;
};

const resetForm = () => {
  if (userFormRef.value) {
    userFormRef.value.resetFields();
    treeRef.value.setCheckedNodes([]);
    menuForm.value.parentId = "0";
  }
};

const beforeClose = (done: () => void) => {
  resetForm();
  done();
};

const submitForm = async () => {
  // console.log(menuForm.value);
  await saveMenuApi(menuForm.value);
  userFormRef.value.resetFields();
  drawer.value = false;
  props.update();
};

const updateMenu = async () => {
  await updateMenuApi(menuForm.value);
  userFormRef.value.resetFields();
  drawer.value = false;
  props.update();
};

defineExpose({
  open,
});
</script>

<template>
  <el-drawer
    :before-close="beforeClose"
    v-model="drawer"
    title="I am the title"
    :with-header="false"
  >
    <el-form
      ref="userFormRef"
      label-position="left"
      label-width="auto"
      :model="menuForm"
      style="max-width: 600px"
    >
      <el-form-item label="父级菜单">
        <el-tree
          ref="treeRef"
          style="max-width: 600px"
          :data="props.menuData"
          show-checkbox
          node-key="value"
          default-expand-all
          :check-strictly="true"
          :expand-on-click-node="false"
          :current-node-key="menuForm.parentId"
          @check="checkClick"
        >
        </el-tree>
      </el-form-item>
      <el-form-item prop="name" label="名称">
        <el-input v-model="menuForm.name"></el-input>
      </el-form-item>
      <el-form-item prop="meta.title" label="标题">
        <el-input v-model="menuForm.meta.title"></el-input>
      </el-form-item>
      <el-form-item prop="path" label="路由路径">
        <el-input v-model="menuForm.path"></el-input>
      </el-form-item>
      <el-form-item prop="component" label="组件路径">
        <el-input v-model="menuForm.component"></el-input>
      </el-form-item>
      <el-form-item prop="meta.icon" label="图标">
        <el-input v-model="menuForm.meta.icon"></el-input>
      </el-form-item>
      <ElSpace>
        <el-button v-if="!isEditor" type="primary" @click="submitForm"
          >提交</el-button
        >
        <el-button v-else type="primary" @click="updateMenu">修改</el-button>
        <el-button type="primary" @click="resetForm">重置</el-button>
      </ElSpace>
    </el-form>
  </el-drawer>
</template>
<style scoped lang="less"></style>
